<!-- 这是一个ViewUnit骨架容器，当视图单元包含异步加载内容时，将在这个中间层处理后渲染 -->
<!-- props数据的dls处理将在这里完成 -->
<script setup>
import { onMounted, ref } from "vue";
import ViewUnit from './ViewUnit.vue';
import {transVnode} from "./defaultRule/RenderRule.js"
const props = defineProps({
  /*这里的option是包含了dls的vnode配置*/
  vnode: {
    type: Object,
    default: () => ({})
  },
  dataScope: {
    type: Object,
    default: () => ({})
  },
  slotScope: {
    type: Object,
    default: () => ({})
  },
  funcScope: {
    type: Object,
    default: () => ({})
  },
  refScope: {
    type: Object,
    default: () => ({})
  },
  renderScope: {
    type: Object,
    default: () => ({})
  }
})

/**
 * 捕捉自定义输出到顶层事件
 * @param e
 */
function catchEvent(e) {
  props.funcScope.emits('event', e)
}

/**
 * 刷新内容
 */
const resultOption = ref()
async function refresh() {
    resultOption.value = props.vnode
}

onMounted(() => {
  refresh()
})
</script>

<template>
  <ViewUnit
    :uuid="vnode.uuid"
    :style="{ position: 'relative' }"
    v-if="resultOption"
    :option="resultOption"
    :refScope="refScope"
    :dataScope="dataScope"
    :funcScope="funcScope"
    :slotScope="slotScope"
    :renderScope="renderScope"
    @event="catchEvent"
  ></ViewUnit>
  <div v-else><q-inner-loading :showing="true"></q-inner-loading></div>
</template>

<style scoped></style>
